<template>
  <div class="modify-cost-price" style="padding-bottom: 20px; overflow: hidden">
    <div style="display: flex; position: relative">
      <h3>修改成本价</h3>
      <span
        style="
          font-size: 20px;
          color: #909090;
          position: absolute;
          right: 3%;
          top: -3px;
          font-weight: bold;
        "
        @click="remove"
        >✕</span
      >
    </div>
    <p style="margin-top: 30px">
      系统将按照您输入的陈本价进行修改，修改后无法恢复之前的陈本价
    </p>
    <div
      class="input-section"
      style="height: 30px; margin-top: 20px; position: relative"
    >
      <input
        type="text"
        placeholder="成本价"
        v-model="costPrice"
        style="
          width: 110%;
          border-radius: 10px;
          height: 41px;
          background-color: #191919;
          border: none;
          padding-left: 12px;
        "
      />
      <span style="position: absolute; right: 20px; color: #b6b6b6">USD</span>
    </div>
    <p style="font-size: 12px; color: #8b8b8b; margin-top: 20px">
      修改后收益额 --
    </p>
    <p style="font-size: 12px; color: #8b8b8b">修改后收益率 --</p>
    <p style="font-size: 12px; color: #8b8b8b; margin-top: 20px">
      点击<span style="color: #fff; text-decoration: underline">交易账单</span
      >查看您的交易记录
    </p>
    <button
      @click="confirm"
      style="
        width: 100%;
        margin-left: 5%;
        height: 44px;
        border-radius: 20px;
        margin-top: 40px;
        background-color: #2e2e2e;
        transform: translateX(-5%);
      "
      :style="{ color: costPrice == '' ? '#717171' : '#fff' }"
    >
      确认
    </button>
  </div>
</template>

<script>
import { color } from "echarts/lib/export";

export default {
  name: "price",
  data() {
    return {
      costPrice: "",
    };
  },
  methods: {
    confirm() {
      if (this.costPrice == "") return;
      // 这里可以添加确认按钮的逻辑，例如提交成本价修改
      console.log("确认修改成本价:", this.costPrice);
    },
    remove() {
      this.$emit("removepri", false);
    },
  },
};
</script>

<style scoped>
.modify-cost-price {
  background-color: black;
  color: white;
  padding: 20px;
}

h2 {
  margin-top: 0;
}

.input-section {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

input {
  background-color: black;
  border: 1px solid white;
  color: white;
  padding: 5px;
  margin-right: 10px;
}

button {
  background-color: gray;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}
</style>
